<template>
    <div style="width:90%;">
        <el-form :model="planForm" :rules="planRules" ref="planForm" label-width="150px" >
            <el-button @click="goback()" size="mini" type="primary" style="margin-left:1000px">返回</el-button>
           
            <el-form-item label="问题名称" prop="faqName" >
                <el-input
                    v-model="planForm.faqName"
                   :disabled="questionflag"
                    style="width:360px;"
                    
                    placeholder="请输入问题名称"
                    maxlength="30"
                    show-word-limit
                ></el-input>
            </el-form-item>
            <!-- <el-form-item label="问题内容：" prop="faqContent" >
                <el-input
                    type="textarea"
                    v-model="planForm.faqContent"
                   :disabled="questionflag"
                    placeholder="请输入问题内容"
                    maxlength="120"
                    show-word-limit
                    :autosize="{minRows:2}"
                    style="width:650px;"
                ></el-input>
            </el-form-item>
            -->
            <!-- <el-form-item label="问题内容:" prop="imgListone">
                <image-upload v-model="planForm.imgListone" :size="'400x400'" :limit="1"    ></image-upload>
            </el-form-item> -->
             <el-form-item label="问题内容" prop="imgListone" >
                <image-upload v-model="planForm.imgListone" :size="'400x400'" :limit="1" v-if="!questionflag"></image-upload>
                <img :src="planForm.imgListone[0]" style="width: 160px;height: 160px;" v-if="questionflag"/>
            </el-form-item>
 <el-form-item label="备注:" prop="remark" >
                <el-input
                    type="textarea"
                    v-model="planForm.remark"
                    :disabled="questionflag"
                    placeholder="请输入备注"
                    maxlength="120"
                    show-word-limit
                    :autosize="{minRows:2}"
                    style="width:650px;"
                ></el-input>
            </el-form-item>
             <el-form-item label="展示顺序" prop="faqNum" >
                <el-input
                    v-model="planForm.faqNum"
                   :disabled="questionflag"
                    style="width:360px;"
                    placeholder="请输入展示顺序"
                 
                    show-word-limit
                ></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm('planForm')" v-if="!questionflag">保 存</el-button>
                <el-button @click="resetForm('planForm')">取 消</el-button>
            </el-form-item>
        </el-form>

       
    </div>
</template>
<script>
import {
    addPrize,
    updatePrize,
    queryGenCoupon
} from "@/api/commonproblem";
import {
  queryPromotionList,
  queryPromotionById,
  queryCouponById,
  savePromotion,
  updatePromotionStatus,
  createTPlan
} from "@/api/promotionProgramEdit";
import imageUpload from "@/page/common/Image-upload";
import { queryCouponList } from "@/api/promotionProgramEdit";

export default {
  data() {
    return {
      keepAlive:true,
      logininfo: {},
      orgList: [],
      questionflag:false,
      // orgSeq: "",
      loading: true,
      typeOptions: [
              {value: "1",label: '虚拟奖品'}, 
              {value: "2",label: '实物奖品'}],
      lsPlanCouponList: [],
      lsCouponList: [],
      planCouponList: [],
      couponList: [],
      planForm: {
        uuid: "",
         imgListone: [],
        faqName: "",
    faqContent:"",
    remark:"",
    faqNum:""
      },
      formCoupon: {
        couponName: ""
      },
      dialogVisibleCoupon: false,
      disabledFlag: false,
      listQuery: {
        current: 1,
        size: 10
      },
      total: 0,
      planRules: {
        
        faqName: [{ required: true, message: "请输入问题名称", trigger: "blur" }],
        faqContent: [{ required: true, message: "请输入问题内容", trigger: "blur" }],
        remark: [{ required: true, message: "请输入备注", trigger: "blur" }],
         faqNum: [{ required: true, message: "请输入排序", trigger: "blur" }],
      }
    };
  },
  components: {
        imageUpload
    },
  mounted() {
    this.logininfo = localStorage.getItem("logininfo");
    this.orgList = JSON.parse(this.logininfo).orgList;
    // this.orgSeq = this.orgList[0].orgSeq;
    // this.planForm.orgSeq = this.orgList[0].orgSeq;
   this.questionflag=this.$route.params.questionflag;
    var v = this.$route.params.edit;
    if (v) {
      // 修改，回显值
      this.planForm.uuid = v.uuid;
      this.planForm.faqName = v.faqName;
    this.planForm.faqContent = v.faqContent;
    this.planForm.remark = v.remark;
    this.planForm.faqNum = v.faqNum;
     this.planForm.imgListone = v.faqContent == null || v.faqContent == ""?[]:[v.faqContent];
    } else {
    //   // 新增，默认值
    //   this.planForm.uuid = "";
    //   this.planForm.status = "1";
    //   this.getCouponList();
    }
  },
  methods: {
    goback() {
      this.$router.go("-1");
    },
    quantityBlur(e, idx) {
      if (e.target.value == '') { return; }
      let flag = new RegExp("^[1-9][0-9]*$").test(e.target.value);
      if (!flag) {
        this.$message({
          message: "限领数量请输入正整数",
          type: "warning"
        });
        e.target.value = '';
      }
    },
    numberBlur(e, name) {
      if (e.target.value == "") {
        return;
      }
      let flag = new RegExp("^[1-9][0-9]*$").test(e.target.value);
      if (!flag) {
        this.$message({
          message: name + "请输入正整数",
          type: "warning"
        });
        e.target.value = "";
      }
    },
    queryPromotionById(uuid) { 
      let data = {
        size: 100,
        current: 1,
        condition: {
        },
        ascs: [],
        descs: []
      };
      queryGenCoupon(data).then(res => {
        if (
          res.records != null &&
          res.records.length > 0
        ) {
          // this.planCouponList =res.records;
          // 去掉已选的
        for (var i in res.records) {
          console.log(uuid);
          console.log(res.records[i]);
          if(uuid == res.records[i].uuid){
          this.planCouponList.push(res.records[i]);
          }
        }
          
        }
        this.getCouponList();
      });
      this.loading = false;
    },

    getCouponList() {
      let data = {
        size: 100,
        current: 1,
        condition: {
          status: 1,
          couponType: 1,
          keyWord: this.formCoupon.couponName
        },
        ascs: [],
        descs: []
      };
      queryGenCoupon(data).then(res => {
        this.couponList = res.records;
        // 去掉已选的
        for (var i in this.planCouponList) {
          this.removeByValue(
            this.couponList,
            "uuid",
            this.planCouponList[i].uuid
          );
        }
      });
      this.loading = false;
    },

    planCouponChecked(row) {
      this.lsPlanCouponList = row;
    },
    couponChecked(row) {
      this.lsCouponList = row;
      if (this.lsCouponList.length > 1) {
          this.$refs.singleTable.toggleRowSelection(this.lsCouponList[0]);
          }
    },
    selectCoupon() {
      // 显示选择卡券对话框
      this.dialogVisibleCoupon = !this.dialogVisibleCoupon;
    },
    deleteCoupon() {
      // 删除已选择的卡券
      this.couponList = this.couponList.concat(this.lsPlanCouponList);
      for (var i in this.lsPlanCouponList) {
        this.removeByValue(
          this.planCouponList,
          "uuid",
          this.lsPlanCouponList[i].uuid
        );
      }
    },
    couponConfirm() {
      this.dialogVisibleCoupon = !this.dialogVisibleCoupon;
      this.planCouponList = this.lsCouponList;//this.planCouponList.concat(this.lsCouponList);
      // for (var i in this.lsCouponList) {
      //   this.removeByValue(this.couponList, "uuid", this.lsCouponList[i].uuid);
      // }
    },

    submitForm(formName) {
      // 保存奖品
       this.keepAlive = false;
      if (this.planForm.faqName == "" || this.planForm.faqName == null) {
        this.$message.error("请输入问题名称");
        return;
      }
    
        if (this.planForm.imgListone.length == 0) {
        this.$message.error("请上传问题内容");
        return;
      }
        if (this.planForm.remark == "" || this.planForm.remark == null) {
        this.$message.error("请输入备注");
        return;
      }
        if (this.planForm.faqNum == "" || this.planForm.faqNum == null) {
        this.$message.error("请输入展示顺序");
        return;
      }
       this.planForm.faqContent = this.planForm.imgListone[0]
      if(this.planForm.uuid == ""){
      addPrize(this.planForm).then(res => {
        if (res.code == "1") {
          this.$message({
            showClose: true,
            message: "保存成功",
            type: "success"
          });
          this.$router.push("commonproblem");
        } else {
          this.$message({
            showClose: true,
            message: "保存失败",
            type: "success"
          });
        }
      });
      } else {
        updatePrize(this.planForm).then(res => {
        if (res.code == "1") {
          this.$message({
            showClose: true,
            message: "修改成功",
            type: "success"
          });
          this.$router.push("commonproblem");
        } else {
          this.$message({
            showClose: true,
            message: "修改失败",
            type: "success"
          });
        }
      });
      }
    },
    // 数组，属性，属性值
    removeByValue: function(arr, attr, value) {
      if (arr == null) {
        return;
      }
      var index = 0;
      for (var i in arr) {
        if (arr[i][attr] == value) {
          index = i;
          break;
        }
      }
      arr.splice(index, 1);
    },
    handleRemove(file, fileList) {
      let newfileList = [];
      fileList.forEach((item, i) => {
        let data = {
          name: item.name,
          url: item.url
        };
        newfileList.push(data);
      });
      this.fileList = newfileList;
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.$router.push("commonproblem");
    }
  },
  beforeRouteLeave(to, from, next) {
    // 设置下一个路由的 meta
    to.meta.keepAlive = this.keepAlive; // C 跳转到 A 时让 A 不缓存，即刷新
    next();
  },
};
</script>
<style lang="less" scoped>
.el-col-20 {
    border: 1px solid #ebeef5;
    margin-left: 150px;
    width: 60%;
}
.el-input {
    width: 60%;
}
.search-form-inline {
    border: 1px solid #ebeef5;
    line-height: 30px;
    padding: 12px;
    margin-bottom: 5px;
}
thead {
    .el-table-column--selection {
        .cell {
            display: none;
        }
    }
}
</style>